<template>
    <div>
        <van-swipe :autoplay="3000" style="width: 100%;height: 2.84rem;">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image.banner_img" style="width: 100%;height: 100%;" />
            </van-swipe-item>
        </van-swipe>
        <div class="nav">
            <div>
                <span class="iconfont icon-shuben a1"></span>
                特色课

            </div>
            <div>
                <span class="iconfont icon-xinxi a2"></span>
                一对一辅导
            </div>
            <div>
                <span class="iconfont icon-icon a3"></span>
                学习日历
            </div>
        </div>
        <div class="main" v-for="(item,index) in homeList" :key="index">
            <div
                style="width: 100%;border-left: 4px solid red;height: .8rem;margin: .36rem 0;font-size: .4rem;line-height: .8rem;text-indent: .2rem;">

                {{item.channel_info.name}}
            </div>
            <div v-if="index!=1" v-for="(e,i) in item.list" :key="i" class="list" @click="jiaoshi(e)">
                <div class="left">
                    <img :src="index==1?e.cover_img:e.teacher_avatar" alt="">
                </div>
                <div class="right">
                    <div style="height: 1.2rem;line-height: 1.2rem;font-size: .4rem;">{{e.teacher_name}}</div>
                    <div style="color:#ccc;font-size: .3rem;">{{e.introduction}}</div>
                </div>
            </div>
            <div v-if="index==1" v-for="(e,i) in item.list" :key="i" class="list1" @click="course(e)">
                <div style="font-size: .4rem;font-weight: 700;">{{e.title}}</div>
                <div style="font-size: .26rem;color:#ccc">共点击量</div>
                <div
                    style="margin-top: 1.8rem;font-size: .26rem;color: #ccc;display: flex;justify-content: space-between;">
                    <div>{{e.id}}人报名</div>
                    <div style="color:red;margin-right: 0.4rem;">{{e.underlined_price}}</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { banner, home } from '@/http/api'
import { Swipe, SwipeItem } from 'vant';
export default {
    components: {
        [SwipeItem.name]: SwipeItem,
        [Swipe.name]: Swipe,

    },
    data() {
        return {
            images: [],
            homeList: []
        }
    },
    methods: {
        jiaoshi(obj) {
            this.$router.push({ path: '/lecturer', query: { obj: JSON.stringify(obj) } })
        },
        course(e) {
            this.$router.push({ path: '/courses', query: { id: JSON.stringify(e).id } })
        }
    },
    created() {
        banner().then(res => {
            console.log(res.data);
            this.images = res.data.data
        }),
            home().then(res => {
                console.log(res.data);

                this.homeList = res.data.data
            })
    }
}
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    height: 2.5rem;
    margin-top: -0.8rem;
    display: flex;
    justify-content: space-around;

    >div {
        width: 26%;
        background-color: #fff;
        height: 100%;
        border-radius: .2rem;
        z-index: 4;
        text-align: center;

        font-size: .14rem;

        >span {
            display: block;
            font-size: 1rem;
            text-align: center;
            line-height: 1.5rem;
        }

        .a1 {
            color: #5251da;
        }

        .a2 {
            color: #a1cdcb;
        }

        .a3 {
            color: #d99a81;
        }
    }
}

.icon {
    padding: 0;
    margin: 0;
    width: .5rem;
}

.main {
    width: 96%;
    margin: auto;

    .list1 {
        width: 100%;
        height: 3.6rem;
        background-color: #fff;
        margin-top: .2rem;
        padding: .2rem;
        box-sizing: border-box;

    }

    .list {
        width: 100%;
        height: 2rem;
        background-color: #fff;
        margin: .2rem 0;
        display: flex;
        justify-content: space-between;



        .right {
            flex: 1;


        }

        .left {
            width: 20%;
            // padding: 10%;

            img {
                width: 60%;
                height: 60%;
                border-radius: 50%;
                margin: .4rem;
            }
        }

    }
}
</style>